﻿
@{
    ViewBag.Title = "AddStudent";
}

<h2>添加学生信息</h2>
<hr />
<table class="table table-bordered">
    <tr>
        <td>姓名</td>
        <td>
            <input type="text" id="sName" />
        </td>
    </tr>
    <tr>
        <td>上传头像</td>
        <td>
            <input type="hidden" id="hidden_filepath" />
            <img id="h_img" src="#" style="width:150px;height:150px;"  />
            <input type="file" id="upfile" onchange="UpFile()" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="保存用户信息，不是上传文件" onclick=" AddStudent()" />
        </td>
        <td></td>
    </tr>

</table>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script>

    function AddStudent() {
        //收集要添加到表中的数据信息
        var name = $("#sName").val();
        var h_imgname = $("#hidden_filepath").prop("path"); //隐藏域元素中获取文件保存在网站中的的路径

        //封装，因为收集的数据可能有很多，我们把他封装成一个对象
        var stu = {};
        stu.Name = name;
        stu.HeaderImg = h_imgname;
        //AJAX提交数据
        $.ajax({
            url: '/Student/SaveStudent',
            type: 'post',
            data: stu,
            success: function (res) {
                if (res > 0) {
                    alert('成功');
                    location.href = '/Student/Index';
                }
                else {
                    alert('服务器繁忙，请稍后尝试。。');
                }
            }
        });
    }


    //上传文件
    function UpFile() {
        //在上传控件中取得需要上传的那第一个文件
        var file = $("#upfile")[0].files[0];
        var fdata = new FormData();//创建包装对象
        fdata.append("abc", file); //注意“abc”这个名称在C#代码中要用到，两边要一致

        $.ajax({
            url: '/Student/UpFile',
            type: 'post',
            data: fdata,
            processData: false,
            contentType: false,
            success: function (res) {
                //显示上传成功后的图片
                $("#h_img").prop("src", res)
                $("#hidden_filepath").prop("path", res) //把文件保存的路径保存到隐藏域元素中
            }
        });


    }

</script>

